<template>
  <div>
    <h3>当前最新的count值为： {{$store.state.count}}</h3>
    <button @click="btnHandler1">+1</button>
    <button @click="btnHandler2(3)">+N</button>
    <button @click="btnHandler3(2)">+N2</button>
    <!-- 直接调用mutations中定义的方法，并传参 -->
    <button @click="addN2(2)">+N3</button>
    <button @click="addAsync(4)">+NAsync1</button>
    <button @click="btnHandler4(5)">addNAsync</button>
  </div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {}
  },
  methods: {
    btnHandler1 () {
      // 方式一： 通过this.$store.commit 调用 store/index.js中mutation定义的方法
      // 从而操作vuex中的数据对象
      this.$store.commit('add')
    },
    btnHandler2 (step) {
      // 方式一：调用 mutation定义的方法，并传递参数
      this.$store.commit('addN', step)
    },
    // 方式二：通过引入 mapMutations 的形式调用方法
    ...mapMutations(['addN2']),
    // 调用actions中的方法,进行延迟操作
    ...mapActions(['addAsync']),
    btnHandler3 (step) {
      this.addN2(step)
    },
    btnHandler4 (step) {
      // 通过 dispatch 方法调用异步方法
      this.$store.dispatch('addAsync', 5)
    }
  }
}
</script>
<style scoped>
</style>>
